import 'package:flutter/material.dart';
import 'package:flutter_food/core/model/meal_model.dart';
import 'package:flutter_food/core/ext/int_extension.dart';
import 'package:flutter_food/core/viewmodel/favor_view_model.dart';
import 'package:flutter_food/ui/pages/detail/meal_detail.dart';
import 'package:flutter_food/ui/widgets/icon_text_widget.dart';
import 'package:provider/provider.dart';

final cardRadius = 12.px;

class MealItem extends StatelessWidget {
  final MealModel _mealModel;

  MealItem(this._mealModel);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Card(
        margin: EdgeInsets.all(12.px),
        elevation: 5,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(cardRadius)),
        child: Column(
          children: [
            _buildMealInfo(context),
            _buildBottom(),
          ],
        ),
      ),
      onTap: () => Navigator.of(context)
          .pushNamed(MealDetailScreen.routeName, arguments: _mealModel),
    );
  }

  Widget _buildMealInfo(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(cardRadius),
              topRight: Radius.circular(cardRadius)),
          child: Image.network(
            _mealModel.imageUrl,
            width: double.infinity,
            height: 240.px,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 10.px,
          right: 10.px,
          child: Container(
            width: 300.px,
            padding: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
            decoration: BoxDecoration(
                color: Colors.black45,
                borderRadius: BorderRadius.circular(6.px)),
            child: Text(
              _mealModel.title,
              style: Theme.of(context)
                  .textTheme
                  .bodyText2
                  .copyWith(color: Colors.white),
            ),
          ),
        )
      ],
    );
  }

  // 底部信息
  Widget _buildBottom() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Expanded(
          child: IconText(Icon(Icons.schedule), '${_mealModel.duration}分钟'),
          flex: 1,
        ),
        Expanded(
          child:
              IconText(Icon(Icons.restaurant), '${_mealModel.complexityStr}'),
          flex: 1,
        ),
        Expanded(
          child: _buildFavorItem(_mealModel),
          flex: 1,
        ),
      ],
    );
  }

  Widget _buildFavorItem(MealModel mealDetail) {
    return Consumer<FavorViewModel>(builder: (ctx, favorVM, child) {
      final iconData =
          favorVM.isFavor(mealDetail) ? Icons.favorite : Icons.favorite_border;

      Color favorColor =
          favorVM.isFavor(mealDetail) ? Colors.red : Colors.black;

      final title = favorVM.isFavor(mealDetail) ? "收藏" : "未收藏";
      return GestureDetector(
        child: IconText(
          Icon(
            iconData,
            color: favorColor,
          ),
          title,
          color: favorColor,
        ),
        onTap: () => favorVM.changeFavor(mealDetail),
      );
    });
  }
}
